<template>
  <div class="content-box">
    <e-heading>
      {{title}}
      <router-link :to="{path: '/training/class/history', query: {classId: $route.query.id, curoseId: $route.query.crruid}}" tag="a" class="link_class">上课记录</router-link>
    </e-heading>
    <div class="class_show">
      <!--
      <div class="grade_show">
        <el-row>
          <el-col :span="12">班 级： {{classData.trainClassName}}({{classData.classType}})</el-col>
          <el-col :span="12">课 时： {{classData.lessonCount}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12">课 程： {{classData.trainCourseName}}</el-col>
          <el-col style="width:90px;">上课周期：</el-col>
          <el-col :span="9">
            <p v-for="(item,index) in classData.classCycle" :key="index" >
              每{{item.weekCode | getWeekDay}}&nbsp;&nbsp;&nbsp;&nbsp;{{getParenTime(item.begTime)}} - {{getParenTime(item.endgTime)}}
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">校 区： {{classData.schoolName}}</el-col>
          <el-col :span="12">
            主教练： 
            <template v-for="item in manageList">
              <span class="coach-items">{{item}}</span>
            </template>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            上课时间： {{classData.beginTime | FormatDate('yyyy-MM-dd')}} - {{classData.endTime | FormatDate('yyyy-MM-dd')}}
          </el-col>
          <el-col :span="12">
            助理教练： 
            <template v-for="item in assistCoachList">
              <span class="coach-items">{{item}}</span>
            </template>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            开课状态：<span>{{['未开课', '上课中', '已上完'][classData.startStatus]}}</span>
          </el-col>
          <el-col :span="12">
            课程顾问：
            <template v-for="item in adviserList">
              <span class="coach-items">{{item}}</span>
            </template>
          </el-col>
        </el-row>
      </div>
      -->
      
      <Situation 
          :classData="classData"
          :courseType="$route.query.courseType"
        />
      
      <div class="table_title">
        <el-row>
          <el-col :span="12"><span class="tl">学员列表</span> {{train_class_student.total}}人</el-col>
          <el-col :span="12" style="text-align:right;">
            <el-button size="small" @click="handleBatchClass" type="link" style="line-height:36px;">批量销课</el-button>
            <el-button size="small" @click="handleImportStudent" v-if="classData.startStatus != 2 && roleType != 99">学员分班</el-button>
            <el-button size="small" @click="handleExportStudent" v-if="roleType != 99">导出学员</el-button>
          </el-col>
        </el-row>
      </div>
      <!--tableList-->
      <div class="table_list">
        <el-table
          :data="train_class_student.list"
          :empty-text="classData.startStatus != 2 ? '该班暂无学员，点击“学员分班”来添加吧' : '该班暂无学员'"
          stripe
          @sort-change="handelOrder"
          style="width: 834px"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="35">
          </el-table-column>
          <el-table-column
            label="序号"
            align="center"
            :show-overflow-tooltip="true"
            width="60">
            <template slot-scope="scope">
              {{scope.$index + 1 + (train_class_student.page - 1) * 15}}
            </template>
          </el-table-column>
          <el-table-column
            label="姓名"
            align="center"
            sortable
            :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-if="roleType == 99">{{ scope.row.name }}</span>
              <router-link :to="{path: '/training/student/detail/' + scope.row.studentId}" class="alink_color" v-else>{{ scope.row.name }}</router-link>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            label="性别"
            :width="roleType != 99 ? 88 : 100">
            <template slot-scope="scope">
              <span v-if="scope.row.sex == 1">男</span>
              <span v-else-if="scope.row.sex == 2">女</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            label="年龄"
            sortable
            align="center"
            :show-overflow-tooltip="true"
            :width="roleType != 99 ? 88 : 100">
            <template slot-scope="scope">
              <span>{{scope.row.age ? scope.row.age : '-'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="coach"
            align="center"
            :show-overflow-tooltip="true"
            v-if="roleType != 99"
            label="报名时间"
            width="150">
            <template slot-scope="scope">
              <p>{{scope.row.sources === 0 ? "平台报名" : "后台录入"}}</p>
              {{scope.row.signupTime | FormatDate('yyyy-MM-dd')}}
            </template>
          </el-table-column>
          <el-table-column
            prop="coach"
            align="center"
            :show-overflow-tooltip="true"
            label="分班时间"
            v-if="roleType != 99"
            width="120">
            <template slot-scope="scope">
              {{scope.row.placementTime | FormatDate('yyyy-MM-dd')}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            v-if="roleType != 99"
            label="报名费"
            width="100">
            <template slot-scope="scope">{{scope.row.signupFee | formatMoney}}</template>
          </el-table-column>
          <el-table-column
            label="操作"
            :width="roleType != 99 ? 70 : 'auto'" align="center">
            <template slot-scope="scope">
              <p><el-button @click="handleLeave(scope.row)" type="link" v-if="classData.startStatus != 2">请假</el-button></p>
              <p><el-button @click="handleOffLeave(scope.row)" type="link" v-if="scope.row.leaveStatus == 2">撤销请假</el-button></p>
              <p><el-button @click="handleLesson(scope.row)" type="link" v-if="scope.row.makeUpstatus == 3">补课</el-button></p>
              <p><el-button @click="handleResetDestroy(scope.row)" type="link" v-if="scope.row.signupStatus == 1">撤销销课</el-button></p>
              <p><el-button @click="handleDelete(scope.row.classStudentId,$event)" type="link">删除</el-button></p>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <el-pagination
        v-bind="getPaginationProps(train_class_student)"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange">
      </el-pagination>
      <!--components-->
      <leave-com v-if="isLeave" v-model="isLeave" :isOff="isOff" :student="student" @success="handleImportSuccess"></leave-com>
      <repair v-if="isAddLessons" v-model="isAddLessons" :makeup="makeup" :crruid="Number($route.query.crruid)" @success="handleImportSuccess"></repair>
      <add-student v-if="isAdd" v-model="isAdd"></add-student>
      <!--销课，撤销销课-->
      <destroy-class v-if="isDestroy" v-model="isDestroy" :isDestroy="isDestroy" :classData="classData" :selectStudents="selectStudents" :isResetDestroy="isResetDestroy" :resetStudent="resetStudent" @closeDestroy="handleCloseDestroy"></destroy-class>
    </div>
  </div>
</template>
<script>
import trainApi from 'api/train'
import LeaveCom from './components/LeaveCom'
import Repair from './../student/components/Repair'
import AddStudent from './components/AddStudent'
import DestroyClass from './components/DestroyClass'
import { mapGetters } from 'vuex'
import { pagingList } from 'utils/mixins'
import { parseTime, downloadFile } from 'utils'
import Situation from './components/Situation'
export default {
  mixins: [pagingList],
  components: {
    LeaveCom,
    Repair,
    AddStudent,
    DestroyClass,
    Situation
  },
  created () {
    this.roleType = localStorage.getItem('role_type')
    trainApi.trainClassInfoShow({
      id: this.$route.query.id
    }).then((res) => {
      this.classData = res.data
    })
  },
  computed: {
    ...mapGetters({
      train_class_student: 'train_class_student'
    }),
    manageList () { // 主教练
      let result = []
      if (this.classData && this.classData.classCycle) {
        this.classData.classCycle.forEach(cycle => {
          if (result.indexOf(cycle.manager) === -1) {
            result.push(cycle.manager)
          }
        })
      }
      return result
    },
    assistCoachList () { // 助教
      let result = []
      if (this.classData && this.classData.classCycle) {
        this.classData.classCycle.forEach(cycle => {
          cycle.listAssistantCoach.forEach(assist => { // 助教
            if (result.indexOf(assist) === -1) {
              result.push(assist)
            }
          })
        })
      }
      return result
    },
    adviserList () { // 顾问
      let result = []
      if (this.classData && this.classData.classCycle) {
        this.classData.classCycle.forEach(cycle => {
          cycle.listCounselor.forEach(counselor => { // 顾问
            if (result.indexOf(counselor) === -1) {
              result.push(counselor)
            }
          })
        })
      }
      return result
    }
  },
  data () {
    return {
      student: {}, // 学生数据
      title: '班级详情',
      roleType: '',
      query: this.getQuery({
        order: 1,
        sort: 1
      }),
      isOff: false, // 请假or撤销请假
      isLeave: false,
      isAddLessons: false,
      isAdd: false,
      isDestroy: false,
      classData: '',
      makeup: {},
      tableData: [],
      orderStr: 1,
      sortStr: 1,
      selectStudents: [],
      resetStudent: {},
      isResetDestroy: false
    }
  },
  methods: {
    handleSelectionChange (val) { // 表格复选框
      this.selectStudents = val
    },
    fetch (query) {
      query.classId = this.$route.query.id
      this.$store.dispatch('train_class_student', query)
    },
    getParenTime (time) {
      return parseTime(time, '{h}:{i}')
    },
    handleLeave (student) { // 请假
      this.isLeave = true
      this.isOff = false
      this.student = student
    },
    handleOffLeave (student) { // 撤销请假
      this.isLeave = true
      this.isOff = true
      this.student = student
    },
    handleLesson (row) { // 补课
      this.makeup = row
      this.isAddLessons = true
    },
    handleAddStudent () { // 新增学员
      this.isAdd = true
    },
    handleImportStudent () { // 导入学员
      this.$router.push({path: '/training/class/addstudent', query: {classId: this.$route.query.id}})
    },
    handleDelete (id, event) { // 删除
      this.$confirm('确认从班里移除该学员吗?', '温馨提示', {
        type: 'warning'
      }).then(() => {
        trainApi.studentDelete({id: id}, {context: event.target, successMsg: '删除成功'}).then((res) => {
          this.fetch(this.query)
        })
      }).catch(() => {
        return false
      })
    },
    handelOrder (column) { // 排序
      this.sortStr = column.order === 'descending' ? 2 : 1
      this.orderStr = column.prop === 'age' ? 2 : 1
      this.query.sort = this.sortStr
      this.query.order = this.orderStr
      this.fetch(this.query)
    },
    handleImportSuccess () {
      this.fetch(this.query)
    },
    handleExportStudent () { // 导出班级学员
      let fileName = this.classData.trainClassName + ' 班级学员名单.xls'
      let url = '/api/train/student/class/classStudentExport?classId=' + this.$route.query.id + '&className=' + this.classData.trainClassName + '&order=' + this.orderStr + '&sort=' + this.sortStr
      downloadFile(url, fileName)
    },
    handleBatchClass () { // 批量销课
      if (this.selectStudents.length > 0) {
        this.isResetDestroy = false
        this.isDestroy = true
      } else {
        this.$message('请选择要销课的学员')
      }
    },
    handleResetDestroy (val) { // 撤销销课
      this.isResetDestroy = true
      this.isDestroy = true
      this.resetStudent = val
    },
    handleCloseDestroy () { // 关闭销课
      this.isDestroy = false
      this.fetch(this.query)
    }
  }
}
</script>
<style lang="scss" scoped="scoped">
a.link_class{
  font-size: 14px;
  font-weight:normal;
  color:#2a82ee;
  float:right;
}
.class_show{
  border-top:1px solid #efefef;
  padding-top: 20px;
  .el-col{
    margin: 6px 0;
  }
  .grade_show{
    padding: 35px 25px 17px 25px;
    .el-col{
      margin:0 0 12px 0;
      line-height:1.5;
      padding:0 10px;
    }
    .alink_color{
      color:#2a82ee;
    }
  }
  .table_title{
    margin-top:35px;
    line-height: 36px;
    span.tl{
      font-size: 20px;
    }
  }
  .table_list{
    .cell{
      font-size:12px;
      padding:5px 10px;
    }
    .el-button--small{
      padding-top:5px;
      padding-bottom:5px;
    }
    .el-button--text,.alink_color{
      color:#2a82ee;
    }
    .el-button--link{
      line-height:18px;
    }
  }
}
.coach-items{
  margin-right: 10px;
}
</style>
